﻿<!-- Navbar -->
<div class="navbar">
    <div class="navbar-inner">
        <div class="navbar-container">
            <!-- Navbar Barnd -->
            <div class="navbar-header pull-left">
                <a href="@Url.Action("WelCome","Home")" class="navbar-brand">
                    <small style="text-align: -webkit-center">
                        @*<img src="@(ViewBag.RootNode)/assets/img/logo.png" alt="" />*@
                        @*<img src="@(ViewBag.RootNode)/content/images/logo-big.png" />*@
                        脱缰的喜羊羊
                    </small>
                </a>
            </div>
            <!-- /Navbar Barnd -->
            <!-- Sidebar Collapse -->
            <div class="sidebar-collapse" id="sidebar-collapse">
                <i class="collapse-icon fa fa-bars"></i>
            </div>
            <!-- /Sidebar Collapse -->
            <!-- Account Area and Settings --->
            <div class="navbar-header pull-right">
                <div class="navbar-account">
                    <ul class="account-area">
                        <li>
                            <a class=" dropdown-toggle" data-toggle="dropdown" title="Help" href="#">
                                <i class="icon fa fa-warning"></i>
                            </a>
                            <!--Notification Dropdown-->
                            <ul class="pull-right dropdown-menu dropdown-arrow dropdown-notifications">
                                <li class="dropdown-footer ">
                                    <span>
                                        ^v^没有任何警告哦
                                    </span>
                                </li>
                            </ul>
                            <!--/Notification Dropdown-->
                        </li>
                        <li>
                            <a class="dropdown-toggle" data-toggle="dropdown" title="Tasks" href="#">
                                <i class="icon fa fa-tasks"></i>
                                <span class="badge"></span>
                            </a>
                            <!--Tasks Dropdown-->
                            <ul class="pull-right dropdown-menu dropdown-tasks dropdown-arrow ">
                                <li class="dropdown-header bordered-darkorange">
                                    <i class="fa fa-tasks"></i>
                                    No Tasks In Progress
                                </li>
                            </ul>
                            <!--/Tasks Dropdown-->
                        </li>
                        <li id="headImage">
                            <a class="login-area dropdown-toggle" data-toggle="dropdown">
                                <div class="avatar" title="View your public profile">
                                    <img :src="headUrl">
                                </div>
                                <section>
                                    <h2><span class="profile"><span>@(ViewBag.CurrentModel != null ? ViewBag.CurrentModel.DepartName : string.Empty)  @(ViewBag.CurrentModel != null ? ViewBag.CurrentModel.LoginName : string.Empty)</span></span></h2>
                                </section>
                            </a>
                            <!--Login Area Dropdown-->
                            <ul class="pull-right dropdown-menu dropdown-arrow dropdown-login-area">
                                <li class="username"><a>@(ViewBag.CurrentModel != null ? ViewBag.CurrentModel.LoginName : string.Empty)</a></li>
                                <li class="email"><a>@(ViewBag.CurrentModel != null ? ViewBag.CurrentModel.DepartName : string.Empty)  @(ViewBag.CurrentModel != null ? ViewBag.CurrentModel.LoginName : string.Empty)  @(ViewBag.CurrentModel != null ? ViewBag.CurrentModel.JobNumber : string.Empty)</a></li>
                                <!--Avatar Area-->
                                <li>
                                    <div class="avatar-area">
                                        <img :src="headUrl" class="avatar">
                                        <span v-on:click="fileClick" class="caption">修改头像</span>
                                        <input v-on:change="fileChange($event)" accept=".png,.jpg,.gif,.jpeg" type="file" id="upload_file" style="display: none">
                                    </div>
                                </li>
                                <!--Theme Selector Area-->
                                <li class="theme-area">
                                    <ul class="colorpicker" id="skin-changer">
                                        <li><a class="colorpick-btn" href="#" style="background-color:#5DB2FF;" rel="@(ViewBag.RootNode)/assets/css/skins/blue.min.css"></a></li>
                                        <li><a class="colorpick-btn" href="#" style="background-color:#2dc3e8;" rel="@(ViewBag.RootNode)/assets/css/skins/azure.min.css"></a></li>
                                        <li><a class="colorpick-btn" href="#" style="background-color:#03B3B2;" rel="@(ViewBag.RootNode)/assets/css/skins/teal.min.css"></a></li>
                                        <li><a class="colorpick-btn" href="#" style="background-color:#53a93f;" rel="@(ViewBag.RootNode)/assets/css/skins/green.min.css"></a></li>
                                        <li><a class="colorpick-btn" href="#" style="background-color:#FF8F32;" rel="@(ViewBag.RootNode)/assets/css/skins/orange.min.css"></a></li>
                                        <li><a class="colorpick-btn" href="#" style="background-color:#cc324b;" rel="@(ViewBag.RootNode)/assets/css/skins/pink.min.css"></a></li>
                                        <li><a class="colorpick-btn" href="#" style="background-color:#AC193D;" rel="@(ViewBag.RootNode)/assets/css/skins/darkred.min.css"></a></li>
                                        <li><a class="colorpick-btn" href="#" style="background-color:#8C0095;" rel="@(ViewBag.RootNode)/assets/css/skins/purple.min.css"></a></li>
                                        <li><a class="colorpick-btn" href="#" style="background-color:#0072C6;" rel="@(ViewBag.RootNode)/assets/css/skins/darkblue.min.css"></a></li>
                                        <li><a class="colorpick-btn" href="#" style="background-color:#585858;" rel="@(ViewBag.RootNode)/assets/css/skins/gray.min.css"></a></li>
                                        <li><a class="colorpick-btn" href="#" style="background-color:#474544;" rel="@(ViewBag.RootNode)/assets/css/skins/black.min.css"></a></li>
                                        <li><a class="colorpick-btn" href="#" style="background-color:#001940;" rel="@(ViewBag.RootNode)/assets/css/skins/deepblue.min.css"></a></li>
                                    </ul>
                                </li>
                                <!--/Theme Selector Area-->
                                <li class="dropdown-footer">
                                    <a href="javascript:showChangePassword();">
                                        修改密码
                                    </a>
                                    <a href="@Url.Action("Logout", "Auth")">
                                        退出登录
                                    </a>
                                </li>
                            </ul>
                            <!--/Login Area Dropdown-->
                        </li>
                        <!-- /Account Area -->
                        <!--Note: notice that setting div must start right after account area list.
                        no space must be between these elements-->
                        <!-- Settings -->
                    </ul><div class="setting">
                        <a id="btn-setting" title="Setting" href="#">
                            <i class="icon glyphicon glyphicon-cog"></i>
                        </a>
                    </div><div class="setting-container">
                        <label>
                            <input type="checkbox" id="checkbox_fixednavbar">
                            <span class="text">固定头部</span>
                        </label>
                        <label>
                            <input type="checkbox" id="checkbox_fixedsidebar">
                            <span class="text">固定菜单栏</span>
                        </label>
                        @*<label>
                                <input type="checkbox" id="checkbox_fixedbreadcrumbs">
                                <span class="text">Fixed BreadCrumbs</span>
                            </label>*@
                        <label>
                            <input type="checkbox" id="checkbox_fixedheader">
                            <span class="text">固定内容头部</span>
                        </label>
                    </div>
                    <!-- Settings -->
                </div>
            </div>
            <!-- /Account Area and Settings -->
        </div>
    </div>
</div>
<!-- /Navbar -->

<script>
    function showChangePassword() {
        layer.open({
            id: 1,
            type: 1,
            title: '修改密码',
            skin: 'layui-layer-rim',
            area: ['450px', 'auto'],

            content: ' <div class="row" style="width: 420px;  margin-left:7px; margin-top:10px;">'
                + '<div class="col-sm-12">'
                + '<div class="input-group">'
                + '<span class="input-group-addon"> 新 密 码   :</span>'
                + '<input id="firstpwd" type="password" class="form-control" placeholder="请输入密码">'
                + '</div>'
                + '</div>'
                + '<div class="col-sm-12" style="margin-top: 10px">'
                + '<div class="input-group">'
                + '<span class="input-group-addon">确认密码:</span>'
                + '<input id="secondpwd" type="password" class="form-control" placeholder="请再输入一次密码">'
                + '</div>'
                + '</div>'
                + '</div>'
            ,
            btn: ['保存', '取消'],
            yes: function (index, layero) {
                var firstpwd = $('#firstpwd').val();
                var secondpwd = $('#secondpwd').val();
                if (firstpwd == '') {
                    layer.tips('新密码不能为空', '#firstpwd');
                    return false;
                }
                if (secondpwd == '') {
                    layer.tips('确认密码不能为空', '#secondpwd');
                    return false;
                }
                if (firstpwd != secondpwd) {
                    layer.tips('两次密码不一致', '#secondpwd');
                    return false;
                }
                if (firstpwd.length < 6) {
                    layer.tips('密码不能长度不能小于6位', '#firstpwd');
                    return false;
                }
                if (secondpwd.length < 6) {
                    layer.tips('密码不能长度不能小于6位', '#secondpwd');
                    return false;
                }
                var ajaxIndex = layer.load();
                var data = {};
                data.firstpwd = firstpwd;
                $.ajax("@(ViewBag.RootNode)/SysSet/ChangePassword", {
                    type: "POST",
                    data: data,
                    success: function (result) {
                        if (result && result.ResultCode == 0) {
                            parent.layer.msg(result.Message);
                        } else {
                            parent.layer.msg("系统异常，接口请求失败");
                        }
                        layer.close(ajaxIndex);
                        layer.close(index);
                    },
                    error: function () {
                        parent.layer.msg("编辑错误");
                        layer.close(ajaxIndex);
                    }
                });
            },
            btn2: function (index, layero) {
                layer.close(index);
            }

        });
        return false;
    }

    //处理头像
    var app = new Vue({
        el: '#headImage',
        data() {
            return {
                imgList: [],
                size: 0,
                headUrl:'@(ViewBag.CurrentModel!=null && !string.IsNullOrEmpty(ViewBag.CurrentModel.HeadUrl)?ViewBag.CurrentModel.HeadUrl: ViewBag.RootNode+"/content/images/myself.png")'
            }
        },
        methods: {
            fileClick() {
                document.getElementById('upload_file').click();
            },
            fileChange(el) {
                if (!el.target.files[0].size) return;
                this.fileList(el.target.files);
                el.target.value = '';
            },
            fileList(files) {
                for (let i = 0; i < files.length; i++) {
                    this.fileAdd(files[i]);
                }
            },
            fileAdd(file) {
                this.size = this.size + file.size; //总大小
                var reader = new FileReader();
                reader.vue = this;
                reader.readAsDataURL(file);
                reader.onload = function () {
                    file.src = this.result;
                    this.headUrl = this.result;
                    this.vue.imgList.push({
                        file
                    });
                }
                //上传到服务器
                var formData = new FormData();
                formData.append("file",file);
                $.ajax({
                    url: '@(ViewBag.RootNode)/SysSet/ChangeHeadImage',
                    type: "POST",
                    data: formData,
                    contentType: false,
                    processData: false,
                    success: function (data) {
                        if (data && data.ResultCode == 0) {
                            app.$data.headUrl = data.Message;
                            layer.msg('处理成功', { icon: 1 });
                        } else {
                            layer.msg(data.Message, { icon: 5 });
                        }
                    }
                });
            }
        }
    });
</script>